<template>
	<view class="game-container">
		<bgImg></bgImg>
		<bottomFill></bottomFill>
		<tabBar :selectIndex="3"></tabBar>
		<maskLayer v-if="rulesStatus" @handleRulesStatus="selectRulesStatus"></maskLayer>
		
		<view class="game-container-bg">
			<!-- <view class="start" v-if="!startLottery"> -->
				<image class="img" src="../../static/game/title.png" mode="" v-if="!navGame && !isGameOver"></image>
				<text class="text" v-if="!startLottery">游戏将于抽奖结束后开始</text>
				<text class="description" v-if="!startLottery">请注意抽奖环节</text>
				
				<view class="startGame" v-if="startLottery && !navGame && !isGameOver" @click="handleStartLottery">开始游戏</view>
				
			<!-- </view> -->
			<view class="title" v-if="startLottery && navGame && !isGameOver">
				<view class="callback" @click="callback">
					<image class="img" src="../../static/game/callback.png" mode=""></image>
					<text>返回</text>
				</view>
				<view class="time">
					<text>{{isMemory ? '记忆时间' : '所用时间'}}</text>：
					<text class="time-number">{{time}}</text>
					秒
				</view>
				<view class="rules" @click="rulesShow">
					<image class="img" src="../../static/game/copy.png" mode=""></image>
					<text>活动规则</text>
				</view>
			</view>
			<view class="main" v-if="startLottery && navGame && !isGameOver">
				<!-- <image :src="item" class="item" v-for="item,index in imgPosArr" :key="index"></image> -->
				<view class="box" :class="{active:imgRotate[index]}" v-for="item,index in imgPosArr" :key="index" @click="clickImg(index)" ref="img">
					<view class="mask" v-show="imgRotate[index]"></view>
					<image :src="item" class="item" v-show="!imgRotate[index]"></image>
				</view>
			</view>
			<view class="btn" v-if="startLottery && navGame && !isStartGame" @click="startGame">开始游戏</view>
			
			
			<!-- 游戏成功 -->
			<view class="gameSuccess" v-if="isGameOver">
				<view class="gameSuccess-title">恭喜完成游戏领取奖品</view>
				<image class="gameSuccess-img" src="../../static/game/two.png" mode=""></image>
				<text class="gameSuccess-money">200元</text>
				<image class="gameSuccess-prize" src="../../static/game/sun.png" mode=""></image>
				<text class="gameSuccess-description long">*已中过特/一/二/三等奖的同事无法领取阳光普照奖</text>
				<text class="gameSuccess-optimalTime">我的游戏挑战最佳时间</text>
				<text class="gameSuccess-time">{{optimalTime}}</text>
				<text class="gameSuccess-btn" @click="challenge">重新挑战</text>
				<text class="gameSuccess-description">完成游戏只能领取一次奖品</text>
			</view>
		</view>
	</view>
</template>

<script>
	import chip from "../../static/game/chip.png";
	import cosmonaut from "../../static/game/cosmonaut.png";
	import moon from "../../static/game/moon.png";
	import tiger from "../../static/game/tiger.png";
	import track from "../../static/game/track.png";
	import shadow from "../../static/game/shadow.png";
	
	import getGameStatus from "../../api/getGameStatus.js" //获取游戏状态
	import getImgUrl from "../../api/getImgUrl.js" //获取拼图图片地址
	import getImg from "../../api/getImg.js" //获取拼图图片
	import successGame from "../../api/successGame.js" //通关游戏名单
	import submitGame from "../../api/submitGame.js" //提交游戏结果
	export default {
		onLoad(){
			const _this = this;
			
			
			// console.log("onLoad");
			uni.getStorage({
			    key: 'gameStatus',
			    success: function (res) {
			        // console.log(res.data)
					if(res.data === "success"){
						_this.startLottery = true
					}else{
						_this.startLottery = false
					}
			    },
				fail(){
					// // 获取游戏状态
					// getGameStatus().then(r => {
					// 	console.log(r)
					// 	uni.setStorage({
					// 		key:"gameStatus",
					// 		data:r.data.type
					// 	})
						
					// 	_this.startLottery = true
					// })
				}
			});
			
			
			// 打乱图片位置
			this.random()
			
			// 获取最优成绩
			uni.getStorage({
				key:"optimalTime",
				success:(result) => {
					// console.log(result.data)
					this.optimalTime = result.data;
				}
			})
			
			// 路由守卫
			uni.getStorage({
			    key: 'isLogin',
			    fail: function (res) {
			        // console.log(res.data);
					uni.redirectTo({
						url:"/pages/login/login"
					})
			    }
			});
		
			// // 获取拼图图片地址
			// getImgUrl().then(r => {
			// 	console.log(r)
			// })
			// // 获取拼图图片
			// getImg().then(r => {
			// 	console.log(r);
			// })
			// // 通关游戏名单
			// successGame().then(r => {
			// 	console.log(r);
			// })
			
			uni.getStorage({
				key:"bestTime",
				success:(r) => {
					// console.log(r.data)
					this.optimalTime = r.data
				}
			})
		},
		data() {
			return {
				// 初始状态下规则不出现
				rulesStatus:false,
				// 抽奖还未结束
				startLottery:false,
				// 跳转到游戏主体页面
				navGame:false,
				// 记忆时间
				time:3,
				// 开始游戏
				isStartGame:false,
				// 是否记忆
				isMemory:true,
				// 清除定时器
				timer:null,
				// 代表图片位置的数组
				imgPosArr:[chip,chip,cosmonaut,cosmonaut,moon,moon,tiger,tiger,track,track,shadow,shadow],
				// 哪些图片翻转
				imgRotate:[1,1,1,1,1,1,1,1,1,1,1,1],
				// 开始点击
				startClick:false,
				// 点击图片存储数组
				startClickArr:[],
				// 游戏是否结束
				isGameOver:false,
				// 最佳时间
				optimalTime:+Infinity,
			}
		},
		methods: {
			// 规则消失
			selectRulesStatus(){
				this.rulesStatus = false;
			},
			// 规则出现
			rulesShow(){
				this.rulesStatus = true;
			},
			// 重新挑战
			challenge(){
				// this.isGameOver = false;
				this.isGameOver = false;
				this.navGame = true;
				
				
			},
			// 跳转到游戏主体页面
			// 完成后一次游戏，从别的
			handleStartLottery(){
				// this.navGame = true;
				
				
				uni.getStorage({
					key:"successOnceGame",
					success:(result) => {
						// console.log(0)
						// 完成过一次游戏
						this.isGameOver = true;
						this.navGame = false;
					},
					fail:(error) => {
						// console.log(1)
						// 没完成过一次游戏
						this.navGame = true;
					}
				})
				
				// this.isGameOver = true;
			},
			// 跳转到抽奖开始
			callback(){
				this.navGame = false
				
				this.isMemory = true;
				
				uni.showToast({
				  title: "游戏结束",
				  icon: 'none',
				  duration:500,
				  mask: true
				})
				
				// 游戏结束
				this.isGameOver = false
				// 不允许直接进入游戏主体页面
				this.navGame = false
				// 不允许点击
				this.startClick = false
				
				// 清除定时器
				clearInterval(this.timer)
				
				
				// 更新计时时间
				this.time = 3
				// 更新图片位置
				this.random()
				// 更新图片翻状态
				for(let i = 0; i < this.imgRotate.length; i++){
					this.imgRotate[i] = 1
				}
				// 游戏结束按钮出现
				this.isStartGame = false;
				
				
			},
			// 游戏开始
			startGame(){
				uni.showToast({
				  title: "开始记忆",
				  icon: 'none',
				  duration:500,
				  mask: true
				})
				
				
				// 按钮消失
				this.isStartGame = true;
				
				// 所有图片翻转过来记忆
				for(let i = 0; i < this.imgRotate.length; i++){
					this.imgRotate[i] = 0
				}
				

					// 开始记忆
					clearInterval(this.timer)
					this.timer = setInterval(() => {
						this.time -= 1
						if(this.time === 0){
							// 清除记忆定时器
							clearInterval(this.timer)
							
							this.isMemory = false;
							
							// 所有图片翻转过去
							for(let i = 0; i < this.imgRotate.length; i++){
								this.imgRotate[i] = 1
							}
							
							// 允许开始点击
							this.startClick = true;
							
							// 开始点击
							this.timer = setInterval(() => {
								this.time += 1
							}, 1000)
						}
					}, 1500)

				
				
				
			},
			// 随机算法
			random(){
				this.imgPosArr = this.imgPosArr.sort(() => Math.random() - 0.5)
			},
			// 比对两个图片是否一致
			than(){
				// 两张图片相同
				// console.log(this.startClickArr[0] , this.startClickArr[1])
				if(this.startClickArr[0].imgUrl === this.startClickArr[1].imgUrl){
					// 数组清空
					this.startClickArr = []
					
					// 可以继续点击
					this.startClick = true
				}else{
					
					// console.log(this.$refs.img[this.startClickArr[0].index], this.$refs.img[this.startClickArr[1].index])
					// console.log(uni.createSelectorQuery().select(".box"))
					
					// this.$refs.img[this.startClickArr[0].index].addEventListener("transitionend", () => {
					// 	// 图片翻转回去
					// 	this.imgRotate[this.startClickArr[0].index] = 1
					// }, {once:true})
					
					// this.$refs.img[this.startClickArr[1].index].addEventListener("transitionend", () => {
					// 	// 图片翻转回去
					// 	this.imgRotate[this.startClickArr[1].index] = 1
					// }, {once:true})
					
					// 不匹配你就翻回去
					
					setTimeout(() => {
						// console.log(0)
						this.imgRotate[this.startClickArr[0].index] = 1
						this.imgRotate[this.startClickArr[1].index] = 1
						
						setTimeout(() => {
							// 数组清空
							this.startClickArr = []
							
							// 可以继续点击
							this.startClick = true
						}, 400)
					}, 600)
				}
			},
			// 点击一张图片翻转
			clickImg(index){
				// index 点击图片下标
				
				// 判断此时可以开始点击
				if(!this.startClick){
					uni.showToast({
					  title: "游戏未开始或正在比对两张图片",
					  icon: 'none',
					  duration:500,
					  mask: true
					})
					return;
				}
				
				// 此时这张图片已经翻转过来
				if(this.imgRotate[index] === 0){
					uni.showToast({
					  title: "图片已翻转",
					  icon: 'none',
					  duration:300,
					  mask: true
					})
					return;
				}
				
				// console.log(0)
				// 翻转对应图片
				this.imgRotate[index] = 0
				// console.log(this.imgRotate)
				
				
				// startClickArr数组中有两张图片，就不允许在点击
				// console.log(this.imgPosArr[index])
				// console.log(this.startClickArr)
				// console.log(this.startClickArr)
				this.startClickArr.push({
					imgUrl:this.imgPosArr[index],
					index,
				})
				if(this.startClickArr.length >= 2){
					// console.log(this.startClickArr)
					this.startClick = false
					// console.log(this.startClick)
					
					this.than()
				}
				
				// console.log(this.imgRotate)
				// 游戏成功
				if(this.imgRotate.indexOf(1) === -1){
					// 游戏结束
					this.isGameOver = true
					// 不允许直接进入游戏主体页面
					this.navGame = false
					// 不允许点击
					this.startClick = false
					// 成功弹窗
					// 提示弹窗
					uni.showToast({
					  title: "游戏成功",
					  icon: 'success',
					  duration:2000,
					  mask: true
					})
					// 清除定时器
					clearInterval(this.timer)
					
					
					
					// 更新图片位置
					this.random()
					// 更新图片翻状态
					for(let i = 0; i < this.imgRotate.length; i++){
						this.imgRotate[i] = 1
					}
					// 游戏结束按钮出现
					this.isStartGame = false;
					
					uni.getStorage({
						key:"sys_userInfo",
						success:(result) => {
							// console.log(result.data.id)
							submitGame({
								uid:result.data.id,
								gamedFinishedTime:this.time
							}).then((r) => {
								console.log(r);
								// 更新最佳时间
								uni.setStorage({
									key:"bestTime",
									data:r.data.message,
								})
								
								this.optimalTime = r.data.message;
							})
						}
					})
					
					// 更新计时时间
					this.time = 3
					
					
					
					// console.log(0)
					// 完成一次游戏，本地化存储一个标识
					uni.setStorage({
						key:"successOnceGame",
						data:true,
					})
					// 点击开始游戏，如果有这个标识，直接跳转到完成游戏界面
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.game-container{
	position:relative;
	width:100vw;
	height:100vh;
	.game-container-bg{
		position:absolute;
		width:90%;
		height:85%;
		top:3%;
		left:50%;
		transform:translateX(-50%);
		background-image:url(../../static/game/game-bg.png);
		background-size:100% 100%;
		background-repeat:no-repeat;
		box-sizing:border-box;
		padding-top:90rpx;
		color:#fff;
		letter-spacing:2px;
		font-size:28rpx;
		
		display:flex;
		flex-direction: column;
		align-items:center;
		&>.img{
			margin-top:-40rpx;
		}
		&>.text{
				margin-top:80rpx;
		}
		&>.text,.description{
				color:#FFDF02;	
		}
		
		.gameSuccess{
			width:100%;
			color:#FFCC00;
			font-size:28rpx;
			display:flex;
			flex-direction:column;
			align-items:center;
			& *{
				margin:10rpx;
			}
			.gameSuccess-title{
				color:#FFFF99;
			}
			.gameSuccess-img{
				width:200rpx;
				height:200rpx;
			}
			.gameSuccess-money{
				color:#fff;
			}
			.gameSuccess-prize{
				width:220rpx;
				height:40rpx;
			}
			.gameSuccess-description{
				font-size:24rpx;
				letter-spacing: 0;
			}
			.long{
				height:80rpx;
				border-bottom:1rpx solid #FFF0BD;
			}
			.gameSuccess-optimalTime{
				letter-spacing: 1rpx;
				color:#FFF0BD;
			}
			.gameSuccess-time{
				color:#FFF0BD;
				font-size:50rpx;
			}
			.gameSuccess-btn{
				width:80%;
				height:80rpx;
				background: linear-gradient(0deg, #FFA239, #FFDF02);
				border-radius:10rpx;
				text-align:center;
				line-height:80rpx;
				color:#CC252C;
				font-size:28rpx;
				font-weight:bold;
				margin-top:20rpx;
			}
		}
		
		// .start{
		// 	display:flex;
		// 	flex-direction: column;
		// 	align-items:center;
		// 	margin-top:-40rpx;
		// 	color:#FFDF02;	
		// 	.text{
		// 		margin-top:80rpx;
		// 	}
		// }
		.startGame{
			width:80%;
			height:80rpx;
			background: linear-gradient(0deg, #FFA239, #FFDF02);
			border-radius:10rpx;
			text-align:center;
			line-height:80rpx;
			color:#CC252C;
			font-size:28rpx;
			font-weight:bold;
			margin-top:20rpx;
		}
		.title{
			width:90%;
			height:60rpx;
			display:flex;
			justify-content:space-between;
			align-items:center;
			margin-bottom:20rpx;
			.callback,.rules{
				height:60rpx;
				display:flex;
				justify-content:flex-start;
				align-items:center;
				white-space:nowrap;
			}
			.img{
				height:60rpx;
				width:60rpx;
				margin-right:6rpx;
			}
			.rules{
				.img{
					height:40rpx;
					width:40rpx;
					margin-right:10rpx;
				}
			}
		}
		
		.main{
			width:546rpx;
			@include flex(flex-start, row, wrap);
			.box{
				position:relative;
				transition:0.1s;
				width:170rpx;
				height:170rpx;
				margin:6rpx;
				&.active{
					transform:rotateY(180deg);
				}
				.item{
					position:absolute;
					top:0px;
					left:0px;
					width:170rpx;
					height:170rpx;
				}
				.mask{
					position:absolute;
					top:0px;
					left:0px;
					width:170rpx;
					height:170rpx;
					background-color:#8B151D;
				}
			}
		}
		
		.btn{
			width:80%;
			height:80rpx;
			background: linear-gradient(0deg, #FFA239, #FFDF02);
			border-radius:10rpx;
			text-align:center;
			line-height:80rpx;
			color:#CC252C;
			font-size:28rpx;
			font-weight:bold;
			margin-top:20rpx;
		}
	}
}
</style>
